<template>
  <div class="carbon-emissions-calculator-activity-data">
    <!-- 标题 -->
    <!-- 能源消耗区域 -->
    <section class="energy-consumption">
      <h2>能源消耗</h2>
      <div class="data-table-container">
        <el-table :data="energyConsumptionData" style="width: 100%">
          <el-table-column prop="type" label="能源类型" width="300"></el-table-column>
          <el-table-column prop="quantity" label="使用量" width="300"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
        </el-table>
      </div>
    </section>

    <!-- 生产过程区域 -->
    <section class="production-process">
      <h2>生产过程</h2>
      <div class="data-table-container">
        <el-table :data="productionProcessData" style="width: 100%">
          <el-table-column prop="inputMaterial" label="原材料投入量" width="300"></el-table-column>
          <el-table-column prop="productOutput" label="产品产量" width="300"></el-table-column>
          <el-table-column prop="byproduct" label="副产品" width="300"></el-table-column>
          <el-table-column prop="waste" label="废弃物" width="300"></el-table-column>
          <el-table-column prop="unit" label="单位"></el-table-column>
        </el-table>
      </div>
    </section>

    <!-- 运输活动区域 -->
    <section class="transportation-activity">
      <h2>运输活动</h2>
      <div class="data-form-container">
        <el-form label-width="100px">
          <el-form-item label="内部物流运输距离">
            <el-input v-model="internalDistance" placeholder="请输入行驶里程数"></el-input>
          </el-form-item>
          <el-form-item label="外部运输服务距离">
            <el-input v-model="externalDistance" placeholder="请输入行驶里程数"></el-input>
          </el-form-item>
          <el-form-item label="载货量">
            <el-input v-model="cargoVolume" placeholder="请输入载货量"></el-input>
          </el-form-item>
          <el-form-item label="耗油量">
            <el-input v-model="fuelConsumption" placeholder="请输入耗油量"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="updateTransportationData">更新数据</el-button>
          </el-form-item>
        </el-form>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      energyConsumptionData: [
        { type: '煤炭', quantity: '5', unit: '吨' },
        { type: '石油', quantity: '10', unit: '升' },
        { type: '天然气', quantity: '100', unit: '立方米' },
        // ...
        { type: '电力', quantity: '20', unit: '千瓦时' },
      ],
      productionProcessData: [
      { inputMaterial: '50', productOutput: '20', byproduct: '...' , waste: '10', unit: '吨'},
      ],
      internalDistance: '',
      externalDistance: '',
      cargoVolume: '',
      fuelConsumption: '',
    };
  },
  methods: {
    updateTransportationData() {
      // 更新运输活动数据到服务器的逻辑...
    },
  },
};
</script>

<style scoped>

.data-table-container {
  margin-bottom: 20px;
}

</style>